<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Libreflix</title>
      <link rel="stylesheet" href="assets/css/base.css">
      <link rel="stylesheet" href="assets/css/loading.css">
   </head>
   <body>
      <div class="container">
        <webview id="webview" src="https://libreflix.org/" autosize minwidth="800" minheight="600">
        </webview>
        <div class = "indicator"></div>
      </div>
      
      <script type = "text/javascript">
         // Event handlers for loading events.
         // Use these to handle loading screens, transitions, etc
         

         onload = () => {
            const webview = document.querySelector('webview')
            const indicator = document.querySelector('.indicator')
            const div = document.createElement('div');

            const loadstart = () => {
              //indicator.innerText = 'loading...'
              div.className = "loading";
              indicator.appendChild(div);

            }

            const loadstop = () => {
              //indicator.innerText = ''
              div.parentNode.removeChild(div);
            }

            const overflow = () => {
              webview.insertCSS('::-webkit-scrollbar { display: none; }');
            }

            webview.addEventListener('did-start-loading', loadstart)
            webview.addEventListener('did-stop-loading', loadstop)
            webview.addEventListener('did-stop-loading', overflow)
         }
      </script>

   </body>
</html>